<template>
  <!-- 控制tab的行菜单 -->
  <ul class="tab-menu">
    <li v-for="(item,index) in menuList"
        @click="handMenuClick( item,index)"
        class="tabmenu"
        :class="{ isActive: tabIndex === index }"
        :key="index">
      <span v-if="mode==='mode'">{{ item }} <span v-if=" commentCount!==0&&index==1">({{  commentCount }})</span></span>
      <span v-else>{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Menu',
  props: {
    menuList: {
      type: Array,
      required: true
    },
    mode: {
      type: String,
      default: 'router'
    },
    commentCount: {

    }
  },
  data () {
    return {
      tabIndex: 0,
    }
  },
  mounted () {
    this.$bus.$on('tabIndex', (Index) => {
      this.tabIndex = Index
    })
  },
  beforeDestroy () {
    this.$bus.$off('tabIndex');//用完后记得顺手丢掉销毁哦
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler (val) {
        if (this.mode === 'router') {
          this.tabIndex = this.menuList.findIndex((item) => item.path === val)
        }
      }
    }
  },
  methods: {
    handMenuClick (item, index) {
      if (this.mode === 'router') {
        if (this.$route.path !== item.path) {
          this.$router.push(item.path)
        }
      } else if (this.mode === 'mode') {
        this.tabIndex = index
        this.$emit('menuClick', index)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tab-menu {
  font-size: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 40px;
  height: 60px;
  width: 100%;
  background-color: #fff;
  .tabmenu {
    padding: 10px;
    cursor: pointer;
    &.isActive {
      transition: 0.001s;
      font-size: 18px;
      font-weight: bold;
      transition: none;
      transition-duration: 0;
      &::after {
        display: block;
        content: "";
        height: 4px;
        width: 90%;
        margin: 0 auto;
        background-color: #ec4141;
        border-radius: 2px;
      }
    }
  }
}
</style>